<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@page import="java.util.List" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Magic Compass Alipay Barcode Admin Site</title>
<link href="<%=request.getContextPath()%>/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/resources/css/style.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/resources/jquery/jquery-2.2.1.min.js"></script>
<script src="<%=request.getContextPath()%>/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#barcodePayForm').submit(function (e) {
		if(!$("#merchantName").val()){
			$("#warningModalContent").text("Mechant name should not empty.");
			$("#warningModal").modal();
			e.preventDefault();
		}else if(!$("#email").val()){
			$("#warningModalContent").text("Email address should not empty.");
			$("#warningModal").modal();
			e.preventDefault();
		}else if(!$("#displayName").val()){
			$("#warningModalContent").text("Display name should not empty.");
			$("#warningModal").modal();
			e.preventDefault();
		}else if($("#displayName").val().length>32){
			$("#warningModalContent").text("Display name should not more than 32 characters.");
			$("#warningModal").modal();
			e.preventDefault();
		}else if(!$("#feeRate").val()){
			$("#warningModalContent").text("Fee rate should not empty.");
			$("#warningModal").modal();
			e.preventDefault();
		}else if(!$("#accountName").val()){
			$("#warningModalContent").text("Account name should not empty.");
			$("#warningModal").modal();
			e.preventDefault();
		}else if(!$("#accountNumber").val()){
			$("#warningModalContent").text("Account number should not empty.");
			$("#warningModal").modal();
			e.preventDefault();
		}else if(!$("#bankBranchName").val()){
			$("#warningModalContent").text("Bank branch name should not empty.");
			$("#warningModal").modal();
			e.preventDefault();
		}else{
			$("#waitingModal").modal({
			  backdrop: 'static',
			  keyboard: false
			});
		}
	});
	
	$("#emailPlus").click(function(){
		var row = $("<tr><td class=\"lead\">Other Email Address:</td><td><input type=\"text\" class=\"form-control\" name=\"supportEmail\" placeholder=\"email\" value=\"\"></td>");
        $("#emailTable > tbody").append(row);
 	});
});
</script>
</head>
<body>
<div id="wrap">
<%@ include file="../header.jsp" %>
<div class="container">
	<div class="page-header">
		<h1 class="text-center">Merchant Management Page</h1>
	</div>
	<br>
	<div class="page-header">
		<h3 class="text-center">Input Merchant Detail</h3>
	</div>
	<br>
	<form:form method="POST" modelAttribute="updatePageForm" action="updateMerchantComplete" id="barcodePayForm">
		<div class="row">
			<div class="col-md-2">&nbsp;</div>
			<div class="col-md-8">
				<table class="table table-bordered table-condensed table-striped">
					<tr>
				        <td class="lead">Merchant Name:</td>
			            <td><form:input type="text" path="merchantName" cssClass="form-control" /></td>
			        </tr>
					<tr>
				        <td class="lead">Display Name:</td>
			            <td><form:input type="text" path="displayName" cssClass="form-control" /></td>
			        </tr>
			        <tr>
				        <td class="lead">Industry:</td>
			            <td>
			            	<%
								String industry = (String)request.getAttribute("modelIndustry");
							%>
			            	<select name="industry" class="form-control">
						      <option value="5311" <%="5311".equals(industry)?"selected":"" %>>Retailing(5311)</option>
						      <option value="5812" <%="5812".equals(industry)?"selected":"" %>>Catering(5812)</option>
						      <option value="7011" <%="7011".equals(industry)?"selected":"" %>>Accommodation(7011)</option>
						      <option value="4121" <%="4121".equals(industry)?"selected":"" %>>Taxi(4121)</option>
						 	</select>
			            </td>
			        </tr>
			        <tr>
				        <td class="lead">Fee Rate:</td>
				        <td>
				        	<div class="row">
								<div class="col-md-2"><form:input type="text" path="feeRate" cssClass="form-control" /></div>
								<div class="col-md-10">&nbsp;</div>
							</div>				       		
				        </td>
			        </tr>
			    </table>
			    <br>
			    <table class="table table-bordered table-condensed table-striped" id="emailTable">
			    	<tbody>
				    	<tr>
					        <td class="lead">Email Address:&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-plus" role="button" id="emailPlus"></span></td>
					        <td><form:input type="text" path="email" cssClass="form-control" /></td>
				        </tr>
				        <%
							List<String> supportEmails = (List<String>)request.getAttribute("supportEmails");
				        	if(supportEmails != null && !supportEmails.isEmpty()){
				        		for(String anEmail:supportEmails){
						%>
						<tr>
					        <td class="lead">Other Email Address:</td>
					        <td><input type="text" class="form-control" name="supportEmail" value="<%=anEmail%>"></td>
				        </tr>
						<%
				        		}
				        	}
						%>
			        </tbody>
			    </table>
				<br>
				<div class="row">
					<div class="col-md-1">&nbsp;</div>
					<div class="col-md-10">
						<table class="table table-bordered table-condensed table-striped">
							<tr>
								<td class="lead">Account Name:</td>
								<td colspan="3">
									<div class="row">
										<div class="col-md-4"><form:input type="text" path="accountName" cssClass="form-control" /></div>
										<div class="col-md-4">&nbsp;</div>
									</div>
				 				</td>
							</tr>
							<tr>
								<td class="lead">Account Number:</td>
								<td colspan="3">
									<div class="row">
										<div class="col-md-8"><form:input type="text" path="accountNumber" cssClass="form-control" /></div>
									</div>									
				 				</td>
							</tr>
							<tr>
								<td class="lead">Bank Type:</td>
								<td>
								<%
									String modelBankType = (String)request.getAttribute("modelBankType");
								%>
									<select name="bankType" class="form-control">
								      <option value="ANZ" <%="ANZ".equals(modelBankType)?"selected":"" %>>Australia and New Zealand Banking Group(ANZ)</option>
								      <option value="WBC" <%="WBC".equals(modelBankType)?"selected":"" %>>Westpac Banking Corporation(WBC)</option>
								      <option value="BNZ" <%="BNZ".equals(modelBankType)?"selected":"" %>>Bank of New Zealand(BNZ)</option>
								      <option value="ASB" <%="ASB".equals(modelBankType)?"selected":"" %>>ASB Bank Limited(ASB)</option>
								      <option value="Other">Other</option>
								 	</select>
				 				</td>
				 				<td class="lead">Currency</td>
								<td>
									<form:select path="currency" cssClass="form-control">
								      <option value="NZD">NZD</option>
								 	</form:select>
				 				</td>
				 			</tr>
				 			<tr>
				 				<td class="lead">Bank Branch Name:</td>
								<td colspan="3">
									<form:input type="text" path="bankBranchName" cssClass="form-control" />
				 				</td>				 				
							</tr>
						</table>
					</div>
					<div class="col-md-1">&nbsp;</div>
				</div>
				
				<br><br><br>
				<div class="row">
					<div class="col-md-5">&nbsp;</div>
					<div class="col-md-2">
						<button type="submit" class="btn btn-primary btn-md btn-block" name="submitButton" id="submitButton">Submit</button>
						<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
						<form:input type="hidden" path="id" />
					</div>
					<div class="col-md-5">&nbsp;</div>
				</div>
				
			</div><!-- main content div end-->
			<div class="col-md-2">&nbsp;</div>
		</div>
	</form:form>
	
<%@ include file="../warningModalDIV.jsp" %>
<%@ include file="../waitingModalDIV.jsp" %>
	
</div><!-- container end -->
</div><!-- wrap end -->
<%@ include file="../footer.jsp" %>
</body>
</html>